<div class="content-wrapper" [@routerTransition]>
    <sub-header [kind]="kind">
        <div role="actions">
            
        </div>
    </sub-header>
    <section class="content d-flex flex-column flex-column-fluid">
        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">
                    <div class="align-items-center">
                        <!--<Primeng-TurboTable-Start>-->
                            <p-treeTable #tt [value]="menuTreeData" [columns]="cols">
                                <ng-template pTemplate="caption">
                                    <div style="text-align: right">        
                                        <i class="pi pi-search" style="margin:4px 4px 0 0"></i>
                                        <input type="text" pInputText size="50" placeholder="栏目搜索" (input)="tt.filterGlobal($event.target.value, 'contains')" style="width:auto">
                                    </div>
                                </ng-template>
                                <ng-template pTemplate="header" let-columns>
                                    <tr>
                                        <th *ngFor="let col of columns">
                                            {{col.header}}
                                        </th>
                                        <th style="width: 30rem">
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                                    <tr>
                                        <td *ngFor="let col of columns; let i = index">
                                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                                            {{rowData[col.field]}}
                                        </td>
                                        <td>
                                            <button (click)="goExtendedDataModal(rowData)" class="btn btn-sm  blue-dark btn-outline btn-circle mr-1 ml-1" [disabled]="rowData.permissions['Pages.Tenant.MenuInfo.ExtendedData'] 
                                            && rowData.menuExtensionConfig?.extended?.enable ? false : true">扩展数据</button>
                                            <button (click)="goSeoModal(rowData)" class="btn btn-sm  blue-dark btn-outline btn-circle  mr-1" [disabled]="rowData.permissions['Pages_Manange_Tenant_Seo'] 
                                             ? false : true">SEO</button>
                                            <button (click)="goImageTextModal(rowData)" class="btn btn-sm  blue-dark btn-outline btn-circle  mr-1" [disabled]="rowData.permissions['Pages.Tenant.MenuInfo.ImageText'] 
                                            && rowData.menuExtensionConfig?.imageText?.enable ? false : true">图文</button>
                                            <button (click)="goConfigModal(rowData)" class="btn btn-sm  blue-dark btn-outline btn-circle  mr-1" [disabled]="hasConfigPermission ? false : true">配置</button>
                                        </td>
                                    </tr>            
                                </ng-template>
                                <ng-template pTemplate="summary">
                              
                                </ng-template>
                            </p-treeTable>
                        <!--<Primeng-TurboTable-End>-->
                    </div>
                </div>
            </div>
        </div>

    </section>
    <seo-modal #seoModal></seo-modal>
    <image-text-modal #imageTextModal></image-text-modal>
    <menu-extend-modal #extendedDataModal></menu-extend-modal>
    <menu-info-config-modal #jsonEditorModal (callback)="reloadPage()"></menu-info-config-modal>
</div>